<script lang="ts">
    import type { Snippet } from "svelte";
    import Icon from "../Common/Icons/Icon.svelte";
    import { useClassList } from "../utils/useClassList";
    import type { ResultProps } from "./Result";

    const props: ResultProps = $props();
    const status = props.status ?? "info";
    const { icon, title, subTitle, extra, desc, ...rest } = props;

    const classList = $derived(
        useClassList(props, "cm-result", {
            [`cm-result-${status}`]: !!status,
        }),
    );
</script>

{#snippet slot(field: string | Snippet)}
    {#if typeof field === "function"}
        {@render field()}
    {:else}
        {field}
    {/if}
{/snippet}

<div {...rest} class={classList}>
    <div class="cm-result-icon">
        {#if icon}
            {@render icon()}
        {:else}
            {#if status === "info"}
                <Icon icon="info" />
            {/if}
            {#if status === "success"}
                <Icon icon="checkCircle" />
            {/if}
            {#if status === "warning"}
                <Icon icon="warning" />
            {/if}
            {#if status === "error"}
                <Icon icon="xCircle" />
            {/if}
        {/if}
    </div>
    {#if props.title}
        <div class="cm-result-title">
            {@render slot(props.title)}
        </div>
    {/if}
    {#if props.subTitle}
        <div class="cm-result-subtitle">
            {@render slot(props.subTitle)}
        </div>
    {/if}
    {#if props.extra}
        <div class="cm-result-extra">
            {@render slot(props.extra)}
        </div>
    {/if}
    {#if props.desc}
        <div class="cm-result-desc">
            {@render slot(props.desc)}
        </div>
    {/if}
</div>
